/**
 * @author lulongwen
 * Date: 2023-03-08 21:57
 * Description:
 */

// import React from 'react';

import ReactFlow, {
  MiniMap,
  Background,
  BackgroundVariant,
  Controls,
  Position,
  Edge,
} from 'reactflow';

import CustomNode from './CustomNode';
import TooltipNode from './TooltipNode';
import MultiSelectionToolbar from './MultiSelectionToolbar';

const nodeTypes = {
  custom: CustomNode,
  tooltip: TooltipNode,
};

const defaultNodeStyle = {
  border: '2px solid #ff0071',
  background: 'white',
  borderRadius: 8,
};

const initialNodes = [
  {
    id: '1',
    type: 'custom',
    data: { label: 'toolbar top', toolbarPosition: Position.Top },
    position: { x: 24, y: 0 },
    style: defaultNodeStyle,
  },
  {
    id: '2',
    type: 'custom',
    data: { label: 'always open', toolbarPosition: Position.Bottom, toolbarVisible: true },
    position: { x: 200, y: 0 },
    style: defaultNodeStyle,
  },
  {
    id: '5',
    type: 'tooltip',
    data: { label: 'hover tooltip', toolbarPosition: Position.Left },
    position: { x: 360, y: 0 },
    style: defaultNodeStyle,
  },
];

const initialEdges: Edge<any>[] | undefined = [];

function NodeToolbar(props: any) {
  const { thumbnail } = props;

  return (
    <ReactFlow
      defaultNodes={initialNodes}
      defaultEdges={initialEdges}
      className='react-flow-node-toolbar-example'
      minZoom={0.2}
      maxZoom={4}
      fitView
      fitViewOptions={{ padding: 0.5 }}
      nodeTypes={nodeTypes}
    >
      <Background variant={BackgroundVariant.Dots} />
      {!thumbnail && <MiniMap />}
      {!thumbnail && <Controls />}
      <MultiSelectionToolbar />
    </ReactFlow>
  );
}


export default NodeToolbar;
